import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class WrapDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) => Scaffold(
        appBar: AppBar(
          title: Text('流式布局wrap'),
          centerTitle: true,
        ),
        body: Container(
            padding: EdgeInsets.only(left: 8, right: 8),
            child: Column(
              mainAxisSize: MainAxisSize.max,
              children: <Widget>[
                Wrap(
                  // 主轴(水平)方向间距
                  spacing: 8,
                  // 纵轴（垂直）方向间距
                  runSpacing: 0,
                  // 主轴方向的对齐方式
                  alignment: WrapAlignment.start,
                  // 纵轴方向的对齐方式
                  runAlignment: WrapAlignment.start,
                  children: <Widget>[
                    Chip(
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text('A'),
                      ),
                      label: Text('Hamilton'),
                    ),
                    Chip(
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text('M'),
                      ),
                      label: Text('Lafayette'),
                    ),
                    Chip(
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text('H'),
                      ),
                      label: Text('Mulligan'),
                    ),
                    Chip(
                      avatar: CircleAvatar(
                        backgroundColor: Colors.blue,
                        child: Text('J'),
                      ),
                      label: Text('Laurens'),
                    ),
                  ],
                ),
                Wrap(
                  spacing: 5,
                  runSpacing: 5,
                  children: List.generate(
                      10,
                      (index) => Container(
                            width: 100,
                            height: 100,
                            alignment: Alignment.center,
                            decoration: BoxDecoration(
                                gradient: LinearGradient(
                                    begin: Alignment.topLeft,
                                    end: Alignment.bottomRight,
                                    colors: [
                                  Colors.orangeAccent,
                                  Colors.orange,
                                  Colors.deepOrange
                                ])
                            ),
                            child: Text(
                              '$index',
                              style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 20,
                                  fontWeight: FontWeight.bold),
                            ),
                          )
                  ),
                )
              ],
            )
        ),
      );
}
